<!-- 商铺详情页 -->
<template>
	<view class="details">
		<view class="details-img">
		<image :src="cover" mode="" class="C11"></image>
		</view>
		<view class="details-text">
			{{title}}
		</view>
		<hr style='left: 0px;width: 375px; margin: 5rpx 0rpx; color: #919191;' />
		<!-- 租金 转让费 面积 -->
		<view class="details-content">
			<view class="details-content-left">
				<view class="details-content-left-top">
					租金
				</view>
				<view class="details-content-left-bottom">
					{{id}}元
				</view>
			</view>
			<view class="details-content-mid">
				<view class="details-content-mid-top">
					转让费
				</view>
				<view class="details-content-mid-bottom">
					面议
				</view>
			</view>
			<view class="details-content-left">
				<view class="details-content-left-top">
					面积
				</view>
				<view class="details-content-left-bottom">
					50㎡
				</view>
			</view>
		</view>
		<!-- 地图 -->
		<view class="details-map">
			<view class="details-map-left">
				北京市石景山区鲁谷东大街
			</view>
			<view class="details-map-mid">
				地图
			</view>
			<view class="details-map-right iconfont icon-jiantouyou">
				<!-- <view class="iconfont icon-jiantouyou" /> -->
			</view>
		</view>
		<!-- 铺源详细信息 -->
		<view class="details-message">
			<view class="details-message-container">

			</view>
			<view class="details-message-item" @click="toMessages">
				铺源详细信息
			</view>
		</view>
		<!-- 查看更多 -->
		<view class="details-message">
			<view class="details-message-container">
				<view class="details-message-container-title">
					铺源描述
				</view>
				<view class="details-message-container-content">
					士大夫的负担抠痘痘的控股公共开工按旷工高达
				</view>
			</view>
			<view class="details-message-item" @click="toDesc">
				查看更多
			</view>
		</view>
		<!-- 商铺推荐 -->
		<view class="recommend">
			<view class="recommend-text">
				商家推荐
			</view>
			<view class="site-content-first" @click="">
				<view class="site-content-first-img"></view>
				<view class="site-content-first-top">东城美甲店铺转让位于东城区东四地铁站附近盈利美甲店</view>
				<view class="site-content-first-mid">一层/25㎡/社区住宅底商</view>
				<view class="site-content-first-bottom">12700元/月</view>
			</view>
			<view class="site-content-first" @click="">
				<view class="site-content-first-img"></view>
				<view class="site-content-first-top">东城美甲店铺转让位于东城区东四地铁站附近盈利美甲店</view>
				<view class="site-content-first-mid">一层/25㎡/社区住宅底商</view>
				<view class="site-content-first-bottom">12700元/月</view>
			</view>
			<view class="site-content-first" @click="">
				<view class="site-content-first-img"></view>
				<view class="site-content-first-top">东城美甲店铺转让位于东城区东四地铁站附近盈利美甲店</view>
				<view class="site-content-first-mid">一层/25㎡/社区住宅底商</view>
				<view class="site-content-first-bottom">12700元/月</view>
			</view>
			<view class="site-content-first" @click="">
				<view class="site-content-first-img"></view>
				<view class="site-content-first-top">东城美甲店铺转让位于东城区东四地铁站附近盈利美甲店</view>
				<view class="site-content-first-mid">一层/25㎡/社区住宅底商</view>
				<view class="site-content-first-bottom">12700元/月</view>
			</view>
			<view class="recommend-search">
				查看全部
			</view>
		</view>
		<!-- 联系业主 -->
		<view class="details-bottom">
			<view class="top-content">

			</view>
			<view class="bottom-content">
				<view class="bottom-content-left">
					<view class="bottom-content-top">
						<view class='iconfont icon-xingxing' style="font-size: 28px;"></view>
					</view>
					<view class="bottom-content-bottom">
						收藏
					</view>
				</view>
				<view class="bottom-content-right">
					联系业主
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				placeholder:'',
				delslist:[],
				title:'',
				img:'',
				nlikes:'',
				id:''
			}
		},
		methods: {
			// 跳转到铺源详细信息
			toMessages() {
				uni.navigateTo({
					url: './messages'
				});
			},
			// 跳转到铺源描述
			toDesc() {
				uni.navigateTo({
					url: './desc'
				});
			}
		
		},
		  onLoad(event) {
			  this.title=JSON.parse(event.detailDate).title,
			  this.cover=JSON.parse(event.detailDate).cover,
			  this.id=JSON.parse(event.detailDate).id
		            console.log(JSON.parse(event.detailDate));
		            this.banner = JSON.parse(decodeURIComponent(event.detailDate));
		            //详情标题
		            uni.setNavigationBarTitle({
		                title: this.banner.title
		            });

	}
	}
</script>

<style scoped lang="less">
	.C11{
		width: 100%;
		height: 192px;
	}
	.details {
		width: 100%;
		height: 100%;

		.details-img {
			left: 0px;
			top: 20px;
			width: 375px;
			height: 192px;
			background-color: yellow;
		}

		.details-text {
			margin: 10px 15px 11px 12px;
			width: 348px;
			height: 52px;
			line-height: 26px;
			color: rgba(16, 16, 16, 1);
			font-size: 18px;
			text-align: left;
			font-family: Arial;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.details-content {
			width: 100%;
			height: 86px;
			// background-color: blue;
			display: flex;

			.details-content-left {
				float: left;
				width: 120px;
				height: 100%;

				// background-color: red;
				.details-content-left-top {
					margin-left: 47px;
					margin-top: 12px;
					width: 29px;
					height: 23px;
					line-height: 20px;
					color: rgba(102, 102, 102, 1);
					font-size: 14px;
					text-align: center;
					font-family: Arial;
				}

				.details-content-left-bottom {
					margin-left: 35px;
					margin-top: 7px;
					width: 54px;
					height: 23px;
					line-height: 20px;
					color: rgba(255, 68, 68, 1);
					font-size: 14px;
					text-align: center;
					font-family: Arial;
				}
			}

			.details-content-mid {
				float: left;
				width: 130px;
				height: 100%;
				border-left: 1px solid #919191;
				border-right: 1px solid #919191;

				.details-content-mid-top {
					margin-left: 44px;
					margin-top: 12px;
					width: 43px;
					height: 23px;
					line-height: 20px;
					color: rgba(102, 102, 102, 1);
					font-size: 14px;
					text-align: center;
					font-family: Arial;
				}

				.details-content-mid-bottom {
					margin-left: 38px;
					margin-top: 7px;
					width: 54px;
					height: 23px;
					line-height: 20px;
					color: rgba(255, 68, 68, 1);
					font-size: 14px;
					text-align: center;
					font-family: Arial;
				}
			}
		}

		.details-map {
			width: 100%;
			height: 50px;
			display: flex;

			// position: relative;
			// background-color: #999999;
			.details-map-left {
				// background-color: yellow;
				float: left;
				margin-left: 12px;
				margin-top: 14px;
				width: 169px;
				height: 23px;
				line-height: 20px;
				color: rgba(16, 16, 16, 1);
				font-size: 14px;
				text-align: center;
				font-family: Arial;
			}

			.details-map-mid {
				// background-color: green;
				margin-top: 14px;
				margin-left: 140px;
				width: 25px;
				height: 23px;
				line-height: 17px;
				color: rgba(153, 153, 153, 1);
				font-size: 12px;
				text-align: center;
				font-family: Arial;
			}

			.details-map-right {
				margin-top: 14px;
				width: 21px;
				height: 21px;
				// background-color: rgba(153, 153, 153, 1);
			}
		}

		// 铺源详情
		.details-message {
			margin-top: 5px;
			width: 100%;
			height: 155px;
			position: relative;
			display: flex;
			.details-message-item {
				position: absolute;
				width: 353px;
				height: 48px;
				margin: 107px 10px 0px 12px;
				line-height: 48px;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				border: 1px solid rgba(187, 187, 187, 1);
				color: purple;
			}

			.details-message-container {
				width: 100%;
				.details-message-container-title{
					margin-top: 0px;
					margin-left: 12px;
				}
				.details-message-container-content{
					margin-left: 12px;
					font-size: 12px;
				}
			}
		}

		// 商铺推荐
		.recommend {
			margin-top: 25px;
			width: 374px;
			// height: 555px;

			.recommend-text {
				margin-top: 5px;
				width: 100%;
				height: 48px;
				line-height: 48px;
				color: #101010;
				font-size: 22px;
			}

			.site-content-first {
				border-bottom: 1px solid #999999;
				position: relative;
				display: flex;
				width: 100%;
				height: 138px;

				.site-content-first-img {
					position: absolute;
					margin-left: 11px;
					margin-top: 13px;
					width: 144px;
					height: 113px;
					border-radius: 6px;
					background-color: #0044CC;
				}

				.site-content-first-top {
					position: absolute;
					margin-top: 22px;
					margin-left: 167px;
					width: 200px;
					height: 40px;
					line-height: 20px;
					color: rgba(16, 16, 16, 1);
					font-size: 14px;
					text-align: left;
					font-family: Arial;
				}

				.site-content-first-mid {
					position: absolute;
					margin-top: 70px;
					margin-left: 167px;
					width: 129px;
					height: 23px;
					line-height: 17px;
					color: rgba(153, 153, 153, 1);
					font-size: 12px;
					text-align: center;
					font-family: Arial;
				}

				.site-content-first-bottom {
					position: absolute;
					margin-top: 103px;
					margin-left: 167px;
					width: 72px;
					height: 23px;
					line-height: 20px;
					color: rgba(255, 68, 68, 1);
					font-size: 14px;
					text-align: center;
					font-family: Arial;
				}
			}

			.recommend-search {
				margin-top: 5px;
				width: 100%;
				height: 50px;
				font-size: 15px;
				text-align: center;
				line-height: 50px;
				color: purple;
			}
		}

		// 联系业主
		.details-bottom {
			margin-top: 5px;
			width: 374px;
			height: 109px;

			.top-content {
				width: 100%;
				height: 54px;
				background-color: #999999;
			}

			.bottom-content {
				width: 100%;
				height: 55px;
				text-align: center;
				display: flex;

				.bottom-content-left {
					margin-left: 15px;
					float: left;
					width: 75px;
					height: 55px;

					.bottom-content-top {
						width: 75px;
						height: 30px;
						font-size: 30px;
					}

					.bottom-content-bottom {
						width: 75px;
						height: 25px;
						line-height: 25px;
						font-size: 15px;
						color: rgba(153, 153, 153, 1);
					}
				}

				.bottom-content-right {
					float: left;
					margin-top: 8px;
					margin-left: 10px;
					height: 39px;
					line-height: 39px;
					width: 260px;
					background-color: purple;
					font-size: 20px;
					color: #FFFFFF;
					border-radius: 5px;
				}
			}
		}
	}
</style>
